<template>
	<view style="position: relative;">

		<!-- 上部车辆信息 扫码按钮 -->
		<view class="truck_item">
			<view class="div_item">
				<view>发往<span>{{truck.addrto}}</span></view>
				<view>卸货点 <span>{{truck.addrxhd}}</span></view>
			</view>
			<view class="div_item">
				<view>车牌号<span>{{truck.vehicleno}}</span></view>
				<view>装车单号<span>{{truck.loadno}}</span></view>
			</view>

			<view class="scan_div" v-if="type != 1">
				<view>运单数:{{order_num || '0'}}</view>
				<view class="btn_scan" @click.stop="onScan">扫运单码</view>
				<view class="btn_scan" @click.stop="onOk">完成装车</view>
			</view>

		</view>

		<!-- 占位控件 -->
		<view :style="{ height: truck_item_height + 'px' }"></view>

		<!-- 运单列表 -->
		<view class="order_list_div">
			<view v-for="(item,index) in order_list" :key="item.docid" class="order_list_item">
				<view class="div_order_item">
					<view>货物<span>{{item.goodsname}}</span></view>
					<view>数量<span>{{item.goodsquantity}}</span></view>
				</view>
				<view class="div_order_item">
					<view>目的地<span>{{item.addrto.name}}</span></view>
					<view>卸货点<span>{{item.addrxhd.nodeName}}</span></view>
				</view>
				<view class="div_order_item">
					<view>发货人<span>{{item.sendername}}</span></view>
					<view>电话<span>{{item.sendertel}}</span></view>
				</view>
				<view class="div_order_item">
					<view>收货人<span>{{item.receivername}}</span></view>
					<view>电话<span>{{item.receivertel}}</span></view>
				</view>
				<view class="div_order_item">
					<view>运单号<span>{{item.docno}}</span></view>
					<view><span></span></view>
				</view>
				<view class="div_order_item" v-if="type != 1">
					<view></view>
					<view class="btn_unload" @click.stop="onDel(item,index)">卸 车</view>
					<view></view>
				</view>
			</view>
		</view>

		<view v-if="!order_list || order_list.length <= 0" class="empty_view">暂无运单~</view>

	</view>
</template>

<script>
	import { tsToDateFormat } from '@/utils/util.js'
	export default {
		data() {
			return {
				type: '1', // 1 车次详情 2 扫码装车
				truck_item_height: 0, // 上部车辆信息的高度

				truck: {}, // 车次信息
				order_list: [], // 记录装车运单列表
			}
		},

		methods: {

			// 扫码
			onScan() {
				let that = this
				let userinfo = this.$getUserInfo()
				// 允许从相机和相册扫码
				uni.scanCode({
					success: async result => {
						// console.log('条码类型：' + result.scanType);
						// console.log('条码内容：' + result.result);
						// that.$toast(`条码类型 = ${result.scanType} 条码内容 = ${result.result}`)

						// 检查数组中是否已存在运单
						const hasOrder = that.order_list.some(item => item.docid == result.result)

						let res = await that.$get_order_by_id({
							memberid: userinfo.company_tms_id,
							accountid: userinfo.user_tms_id,
							keyid: result.result,
						})
						console.log('get_order_by_id.res = ', res)
						if (res.statuscode == 200) {
							const order = res.data
							if (hasOrder) {
								uni.showModal({
									title: `提示`,
									content: `当前货物已扫码！货物:${order.goodsname}${order.goodsquantity}件 运单号:${order.docno}`,
									success: res => {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
								return
							}
							that.order_list.unshift(order)
						} else {
							that.$toast(`条码类型 = ${res.msg}`)
						}

					}
				})
			},

			// 卸车
			onDel(item, index) {
				let that = this
				uni.showModal({
					title: `提示`,
					content: `是否删除该运单？货物名称:${item.goodsname} 运单号:${item.docno}`,
					success: res => {
						if (res.confirm) {
							that.order_list.splice(index, 1)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},

			// 完成装车
			async onOk() {
				let that = this

				console.log('生成的运单数据.ids = ', that.genOrderIds());
				console.log('生成的运单数据.order_arr = ', that.genOrderList());

				uni.showModal({
					title: `提示`,
					content: `是否完成装车？`,
					success: async res => {
						if (res.confirm) {
							let uinfo = this.$getUserInfo()
							// memberid, accountid, transferid, loadDt, location, xhd, vehicleid, vehicleNo,
							// driver, driverTel, driverCard, details
							let res = await this.$post_docloading({
								transferid: that.truck.transferid,
								memberid: uinfo.company_tms_id,
								accountid: uinfo.user_tms_id,
								loaddt: `${tsToDateFormat(new Date())}`,
								location: that.truck.tolocation,
								xhd: that.truck.xhd,
								vehicleId: that.truck.vehicleid,
								vehicleNo: that.truck.vehicleno,
								driver: that.truck.drivername,
								driverTel: that.truck.drivertel,
								// drivercard: that.truck.drivercard,
								details: that.genOrderIds(),
							}, 'application/json')
							console.log('完成装车.res = ', res);
							if (res.statuscode == 200) {

								// 全球通装车成功 进行顺和物联装车 waybill 
								let res_shwl = await that.$post_loading({
									id: that.truck.transferid,
									waybill: JSON.stringify(that.genOrderList()),
								})
								console.log('顺和物联装车.res_shwl = ', res_shwl);

								// 通知车次列表页面刷新数据
								uni.$emit('onLoadSuccess', {})
								uni.showModal({
									title: `提示`,
									content: `装车成功`,
									showCancel: false,
									success: res => {
										if (res.confirm) {
											uni.navigateBack()
										} else if (res.cancel) {
											console.log('装车成功,用户点击取消');
										}
									}
								})
							}
						} else if (res.cancel) {
							console.log('完成装车.用户点击取消');
						}
					}
				})
			},

			// 生成装车运单id列表数据
			genOrderIds() {
				let that = this
				let order_ids = []
				if (that.order_list && that.order_list.length > 0) {
					that.order_list.forEach((item, index) => {
						order_ids.push(item.docid)
					})
					return order_ids
				}
				return []
			},

			// 生成装车运单列表数据
			genOrderList() {
				let that = this
				let order_arr = []
				if (that.order_list && that.order_list.length > 0) {
					that.order_list.forEach((item, index) => {
						order_arr.push({
							addrlhd: item.addrlhd,
							addrxhd: item.addrxhd,
							remark: item.remark,
							sendername: item.sendername,
							sendertel: item.sendertel,
							receivername: item.receivername,
							receivertel: item.receivertel,
							goodsname: item.goodsname,
							goodsno: item.goodsno,
							goodsquantity: item.goodsquantity,
							goodsvolume: item.goodsvolume,
							goodsweight: item.goodsweight,
							all_amount: item.freight,
							transferlocation: item.transferlocation,
							waybill_sn: item.docno,
							docid: item.docid,
							pay_type: item.freighttype,
						})
					})
					return order_arr
				}
				return []
			},

		},

		computed: {
			order_num() {
				if (!this.order_list) return 0
				return this.order_list.length
			}
		},

		onLoad(options) {
			// console.log('车次详情页面收到的车次数据 = ', options.truck);
			this.truck = JSON.parse(options.truck)
			this.order_list = this.truck.detailModel
			this.type = options.type

			let that = this
			uni.setNavigationBarTitle({
				title: that.type == '1' ? '车次详情' : '扫码装车'
			})

			setTimeout(() => {
				uni.createSelectorQuery().selectAll('.truck_item').boundingClientRect(data => {
					// console.log('truck_item.boundingClientRect = ', data)
					// that.truck_item_height = data[0].height + data[0].top
					that.truck_item_height = data[0].height
				}).exec()
			}, 200)

		},

	}
</script>

<style scoped>
	.truck_item {
		padding: 14rpx;
		/* border: solid 1rpx rgba(0, 0, 0, 0.15); */
		/* border-radius: 10rpx; */
		position: fixed;
		left: 0;
		right: 0;
		background-color: white;
	}

	.div_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 14rpx 14rpx 0 14rpx;
		font-size: 28rpx;
	}

	span {
		/* display: block; */
		margin: 0 0 0 10rpx;
		color: #1890FF;
		font-size: 26rpx;
	}

	.scan_div {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: rgba(0, 0, 0, 0.55);
		margin: 20rpx 0 0 0;
	}

	.btn_scan {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: white;
		background-color: #1890FF;
		border-radius: 8rpx;
		margin: 0 0 0 10rpx;
	}

	.order_list_div {
		background-color: white;
	}

	.order_list_item {
		margin: 20rpx 20rpx 20rpx 20rpx;
		border: solid 1rpx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
		padding: 0 0 14rpx 0;
	}

	.div_order_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 14rpx 14rpx 0 14rpx;
		font-size: 28rpx;
	}

	.btn_unload {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: red;
		background-color: white;
		border: solid 1rpx rgba(0, 0, 0, 0.15);
		border-radius: 8rpx;
	}

	.empty_view {
		width: 100%;
		height: 400rpx;
		line-height: 400rpx;
		text-align: center;
		color: rgba(0, 0, 0, 0.55);
	}
</style>